<template>
  <div ref="myChart" class="radar-chart" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'RadarChart',
  props: {
    indicatorData: {  // 雷达图指标数据
      type: Array,
      required: true
    },
    seriesData: {     // 系列数据
      type: Array,
      required: true
    },
    dataColor: {      // 颜色
      type: String,
      default: '#ffffff'
    },
    areaColor: {      // 覆盖颜色
      type: String,
      default: '#ffffff'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.myChart)
      this.updateChart()
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize()
      }
    },
    updateChart() {
      const option = {
       // backgroundColor: 'rgba(2,47,125,0.2)',
        radar: {
          radius: '70%',
          splitNumber: 4,
          axisName: {
            color: this.dataColor,
            fontSize: 13
          },
          splitArea: {
            areaStyle: {
              color: ['rgba(2,47,125,0.2)', 'rgba(2,47,125,0.3)'],
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 10
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(207,244,245,0.2)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(207,244,245,0.2)'
            }
          },
          indicator: this.indicatorData
        },
        series: [{
          type: 'radar',
          emphasis: {
            lineStyle: {
              width: 4
            }
          },
          data: this.seriesData.map(item => ({
            ...item,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
              color: this.dataColor
            },
            itemStyle: {
              color: this.dataColor
            },
            areaStyle: {
              color: this.areaColor
            }
          }))
        }],
        tooltip: {
          trigger: 'item'
        }
      }
      
      this.chart.setOption(option)
    }
  },
  watch: {
    indicatorData: {
      handler() {
        this.updateChart()
      },
      deep: true
    },
    seriesData: {
      handler() {
        this.updateChart()
      },
      deep: true
    },
    dataColor() {
      this.updateChart()
    },
    areaColor() {
      this.updateChart()
    }
  }
}
</script>

<style scoped>
.radar-chart {
  width: 100%;
  height: 100%;
}
</style>